/*
 * @Author: ayun chengyunwu@jiatui.com
 * @Date: 2023-07-13 11:26:15
 * @LastEditors: ayun chengyunwu@jiatui.com
 * @LastEditTime: 2023-07-17 17:30:16
 * @FilePath: /ift-economy-network-h5/src/pages/InvestmentScheduling/components/ProjectMonitoringItem/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { CapsuleTabs, Tabs, Tag } from 'antd-mobile'
import Styles from './index.module.scss'
import Item from '../../InvestmentScheduling/components/Item'
import { useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import preCoordination from '../../../assets/image/icon_pre_coordination.png'

type PropsT = {}

const index = ({}: PropsT) => {
  const navigator = useNavigate()

  const initData = useMemo(
    () => ({
      screeningData: [
        { text: '全部', id: 1 },
        { text: '涉及本部门', id: 2 },
        { text: '部门间协调', id: 3 },
        { text: '提交待审批', id: 4 },
        { text: '草稿', id: 5 },
      ],
      resolveIssuesData: [
        { text: '全部', id: 1 },
        { text: '部门发起', id: 2 },
        { text: '总指办发起', id: 3 },
      ],
    }),
    []
  )

  // 跳转
  const handleClick = (e: string) => {
    navigator(`/project-monitoring-details?id=${e}&tab=issueRecord`)
  }

  const RenderItem = () => (
    <Item
      onClick={() => handleClick('123132132132')}
      title={
        <>
          <div
            className={`${Styles.border_b_1}`}
            style={{ position: 'relative' }}
          >
            <p className={`fontsize_16 fw_600 color_333 ff_R mr_10`}>
              福田区智慧福田二期xxxxxxxx项目
            </p>
            <Tag
              color="primary"
              fill="outline"
              className={`${Styles.mt_4} mb_12`}
            >
              其他问题类型
            </Tag>
            <img
              style={{
                width: '62px',
                position: 'absolute',
                top: '0',
                right: '0px',
              }}
              src={preCoordination}
            />
          </div>
        </>
      }
      content={
        <div className={`fontsize_13 color_333 mt_12`}>
          <p>
            设计部门：
            <span className={`color_999`}>区政数局、沙头街道、梅林街道</span>
          </p>
          <p className={`${Styles.mt_4}`}>
            项目进展情况及需协调问题：
            <span className={`color_999`}>
              需加快审批办理施工许可相关证件，协助推动项目签约。
            </span>
          </p>
        </div>
      }
    />
  )

  return (
    <>
      <Tabs>
        <Tabs.Tab title="本部门调度跟踪" key="fruits">
          <div>
            <CapsuleTabs>
              {initData.screeningData.map((item) => (
                <CapsuleTabs.Tab title={item.text} key={item.id} />
              ))}
            </CapsuleTabs>
          </div>
          <div className={`mt_12`}>
            {Array.from(Array(20), (v, k) => k).map((item) => (
              <RenderItem key={item} />
            ))}
          </div>
        </Tabs.Tab>
        <Tabs.Tab title="滞后项目" key="vegetables">
          <div>
            <CapsuleTabs>
              {initData.resolveIssuesData.map((item) => (
                <CapsuleTabs.Tab title={item.text} key={item.id} />
              ))}
            </CapsuleTabs>
          </div>
          <div className={`mt_12`}>
            {Array.from(Array(20), (v, k) => k).map((item) => (
              <RenderItem key={item} />
            ))}
          </div>
        </Tabs.Tab>
      </Tabs>
    </>
  )
}

export default index
